{% extends 'layout.html' %}
{% block css %}
    <style>
        .color-radio label {
            margin-left: 0;
            padding-left: 0;
        }

        .color-radio input[type="radio"] {
            display: none;
        }

        .color-radio input[type="radio"] + .cycle {
            display: inline-block;
            height: 25px;
            width: 25px;
            border-radius: 50%;
            border: 2px solid #dddddd;
        }

        .color-radio input[type="radio"]:checked + .cycle {
            border: 2px solid black;
        }
    </style>
{% endblock %}
{% block content %}
    <form method="post" novalidate>
        {% csrf_token %}
        {% for field in form %}
            <div class="form-group" style="position: relative;margin-bottom: 25px;">
                <label for="{{ field.id_for_label }}">
                    {{ field.label }}
                    {% if field.help_text %}
                        <span style="font-weight: 400;color:#333333;">({{ field.help_text }})</span>
                    {% endif %}
                </label>
                {{ field }}<span style="color:red;position: absolute;">{{ field.errors.0 }}</span>
            </div>
        {% endfor %}
        <button type="submit" class="btn btn-primary">保存</button>
        <span style="color: red;">{{ error }}</span>
    </form>
{% endblock %}